<script setup lang="ts">
import { onMounted, reactive, nextTick, watch } from "vue";
import { useRoute } from "vue-router";
import projectVue from "@/components/page/project.vue";
import ButtonVue from '@/components/More.vue';
import { getProjects } from "@/api";
const route = useRoute()
const state = reactive({
  list: [
    {
      id: 1,
      title: '媒体传播中心',
      en: 'MEDIA COMMUNICATION CENTER',
      code: 'classify_1a50d44',
      left: {
        title: ['全媒体深度整合', '矩阵式传播途径'],
        subtitle: ['全国各级媒体覆盖', '贯穿传媒产业链', '上中下游'],
        src: 'https://img.cctvch.cn/uploads/f921a96eb9a78515f83eb16a3867c3a3.png'
      },
      right: [
        '覆盖市场调研与咨询，品牌定位与规划，广告创意与制作及媒体发布与投放，依托强大的媒体资源优势，综合传播品牌价值，打造立体营销网络。',
        '电视媒体    平面媒体    网络媒体    广播媒体     新媒体',
        '影响力大    高公信力    传播迅捷    高性价比    精准推送    信息全面    高权威性    形式自由    收听方便    创意内容'
      ]
    },
    {
      id: 2,
      title: '政府合作中心',
      en: 'GOVERNMENT COOPERATION CENTER',
      code: 'classify_1ee87ed',
      left: {
        title: ['深度服务', '国家十二大部委'],
        subtitle: ['财政部 清华 北大', '长期合作伙伴'],
        src: 'https://img.cctvch.cn/uploads/261b41b71a60606552b8f90ba26c02b1.png'
      },
      right: [
        '此为临时占位文字内容，集设计、会务、传播为一体的综合性PPP项目宣传服务商，拥有强大的媒体资源整合优势，是国内PPP宣传最为成熟的团队。',
        'PPP发展论坛   中国PPP论坛   PPP项目宣传',
        '专家交流实录   社会资本之窗'
      ]
    },
    {
      id: 3,
      title: '绿色低碳传播中心',
      en: 'GREEN AND LOW-CARBON COMMUNICATION CENTER',
      code: 'classify_22b0790',
      left: {
        title: ['探索低碳可持续发展的', '新机遇 新路径 新产业'],
        subtitle: ['《中国碳索家》', '成就绿色新商业文明的', '传播者'],
        src: 'https://img.cctvch.cn/uploads/5af278bf1d89128a2ccb46e3e11b3d85.png'
      },
      right: [
        '以碳达峰、碳中和为目标，探索发展绿色低碳新技术、新产业和新业态，构建绿色低碳循环发展经济体系，在探寻高质量、可持续发展道路上发挥创新、引领作用。',
        '新机遇  新路径  新产业  《中国碳索家》'
      ]
    },
    {
      id: 4,
      title: '乡村振兴推广中心',
      en: 'RURAL REVITALIZATION PROMOTION CENTER',
      code: 'classify_264a3db',
      left: {
        title: ['因地制宜', '助力推动乡村振兴战略'],
        subtitle: ['产品 模式 运营', '塑造特色形象'],
        src: 'https://img.cctvch.cn/uploads/c873c258fefeb1d52b2a7f4beb2f1d26.png'
      },
      right: [
        '以国家战略为引导，以市场需求为依托，扎实推动乡村振兴战略，用区域社会经济发展规划、乡村综合项目开发规划等创新理念与方法，因地制宜，为乡村振兴战略提供有效的服务。',
        '目标定位   规划设计   形象塑造   资源整合   产业提升',
        '体系建设   产品设计   销售保障   整体推广    IP授权'
      ]
    },
    {
      id: 5,
      title: '国际事务中心',
      en: 'INTERNATIONAL AFFAIRS CENTER',
      code: 'classify_2973a67',
      left: {
        title: ['全球视野 本土意识'],
        subtitle: ['聚焦国际事务', '前沿领域'],
        src: 'https://img.cctvch.cn/uploads/9f116fdd1dbfc5da27f1e0fac9e2bc10.png'
      },
      right: [
        '此为临时占位文字内容，集设计、会务、传播为一体的综合性PPP项目宣传服务商，拥有强大的媒体资源整合优势，是国内PPP宣传最为成熟的团队。',
        'PPP发展论坛   中国PPP论坛   PPP项目宣传',
        '专家交流实录   社会资本之窗'
      ]
    },
    {
      id: 6,
      title: '品牌文化中心',
      en: 'BRAND CULTURE CENTER',
      code: 'classify_2d4c88a',
      left: {
        title: ['品牌设计｜影视制作', '文创产业'],
        subtitle: ['打造文化价值链', '促进品牌文化', '产业化发展'],
        src: 'https://img.cctvch.cn/uploads/d08f707ddf067da649accfa9ced2cea8.png'
      },
      right: [
        '以标志、标准字、标准色为核心，设计展开成系统化的视觉表达体系，将企业理念、文化等抽象概念转换为具体符号，塑造出独特的企业形象。',
        '品牌设计  影视制作  文创产业'
      ]
    },
    {
      id: 7,
      title: '健康中国项目中心',
      en: 'CHINA HEALTH PROJECT CENTER',
      code: 'classify_378a6e6',
      left: {
        title: ['联合权威专家', '打造一流的健康平台'],
        subtitle: ['展现医疗成果', '传播医学价值'],
        src: 'https://img.cctvch.cn/uploads/fc0fef36e56dcb259c9bcac566125b8f.png'
      },
      right: [
        '医疗政策解读、产业观察、医改资讯、医学卫生、养生保健、医药、食品等内容；涵盖专题访谈、人物专访、纪录片、医学课堂等多种形式。',
        '访谈节目       科普节目       新闻内容     纪录片 ',
        '《名医有约》 《医学百科》 《健康资讯》 《医道》  《大医精诚》 《一味一品》'
      ]
    },
    {
      id: 8,
      title: '会展会务中心',
      en: 'CONVENT AND EXHIBITION CENTER',
      code: 'classify_3c6d1de',
      left: {
        title: ['一站式会展服务', '集策划、组织、管理为一体'],
        subtitle: ['已承办大型会议120余场', '媒体有效传播近千次'],
        src: 'https://img.cctvch.cn/uploads/e7a1e8200c7c8b048e17b570bc12501c.png'
      },
      right: [
        '专业的活动策划、组织、管理等一站式会展服务，集专业会议服务、论坛研讨、新闻发布、展会组织承办实施于一体，实现全方位品牌营销。',
        '场地供应   全案策划   视觉设计   导演执行   设备搭建',
        '摄影摄像   线上平台   媒体邀约   同声传译   整体推广'
      ]
    },
    {
      id: 9,
      title: '数字科技中心',
      en: 'DIGITAL TECHNOLOGY CENTER',
      code: 'classify_455caaf',
      left: {
        title: ['CG | VR | 5G | 大数据', '等技术'],
        subtitle: ['专注多媒体展示研发探索', '提供一体化的创意展示', '解决方案'],
        src: 'https://img.cctvch.cn/uploads/48f66ea7d16a8486afeeb3a0b65112d8.png'
      },
      right: [
        '通过CG特效、人机交互、裸眼3D、全息影像、5G、大数据可视化等技术，专注多媒体创意展项研发与探索，提供一体化的数字展示与创意解决方案。',
        '数字展馆   企业展厅   数字艺术   结构投影   互动投影',
        '线上展厅   中控系统   多点触控   数据可视    VR应用'
      ]
    },
    {
      id: 10,
      title: '区域发展规划中心',
      en: 'REGIONAL DEVELOPMENT PLANNING CENTER',
      code: 'classify_4988ee9',
      left: {
        title: ['参与区域发展', '战略布局'],
        subtitle: ['促进区域经济发展', '和社会进步'],
        src: 'https://img.cctvch.cn/uploads/fe4b91a71510891c627e52d799860f5a.png'
      },
      right: [
        '区域规划要对整个规划地区国民经济与社会发展中的建设布局问题作出战略决策，把同区域开发与整治有关的各项重大建设落实到具体地域，进行各部门综合协调的总体布局，为编制中长期部门规划和城市规划提供重要依据。',
        '发展战略   布局规划   体系规划   基础设施',
        '土地利用     可持续    发展政策'
      ]
    }
  ] as Array<Record<string, any>>,
})

const queryFn = (selector: string) => {
  return Array.from(document.querySelectorAll(selector));
}
const handleChange = (num: number) => {
  setTimeout(() => {
    let dom = document.querySelector(`.item${num}`)
    dom?.scrollIntoView()
  }, 100);
}

const findIndex = () => {
  const index = state.list.findIndex(item => item.code === route.query.code)
  if (~index) {
    handleChange(index)
  }
}
const changeVal = (val: string) => {
  if (!val) return ''
  // val.replace('\r\n', '<br>')
  let newVal = val.split('\r\n').filter(s => s);
  return '<p>' + newVal.join('</p><p>') + '</p>'
}

onMounted(() => {
  getProjects().then((res: any) => {
    for (const key in res) {
      state.list.forEach(item => {
        if (item.code === key) {
          item.child = res[key].items
          item.img = res[key].img
          item.desc = res[key].desc
        }
      });
    }
    nextTick(() => {
      const intersectionObserver = new IntersectionObserver((entires) => {
      }, { threshold: 0.5 });

      queryFn('.project-item').forEach((item: any) => {
        intersectionObserver.observe(item);
      });
      findIndex()
    })
  })
})
watch(() => route.query.code, (val) => {
  if (route.path === '/project') {
    findIndex()
  }
})
</script>

<template>
  <div class="project-item" :class="'item' + index" :data-id="index" v-for="(item, index) in state.list" :key="index">
    <div class="container">
      <div class="project-header mt-3 mb-3">
        <div class="right">
          <img :src="item.img" :alt="item.title" />
        </div>
        <div class="left">
          <div class="top mb-2">
            <div class="bg-box"></div>
            <!-- <div class="title">{{item.title}}</div> -->
            <div :class="'img img-' + item.id"></div>
            <div class="en">{{item.en}}</div>
          </div>
          <div class="bot" v-html="changeVal(item.desc)"></div>
        </div>
      </div>
      <div class="flex flex-wrap">
        <projectVue v-for="(child, index) in item.child" :key="index" :item="child"></projectVue>
      </div>
      <div class="flex-center mt-2 mb-2">
        <ButtonVue width="170" height="34" :path="'/project/list?code=' + item.code">MORE</ButtonVue>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.project-header {
  position: relative;
  height: 240px;

  .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 670px;
    height: 240px;

    .top {
      position: relative;
      padding-left: 15px;
      overflow: hidden;
    }

    .bg-box {
      position: absolute;
      left: 0;
      top: 10px;
      width: 16px;
      height: 61px;
      background-image: url('@/assets/icon/line.png');
      background-repeat: no-repeat;
      // background-image: linear-gradient(to top, #221A8A 0%, #FF000A 100%);
      border-radius: 5px 0 0 5px;
    }

    .img {
      height: 31px;
      margin-top: 12px;
      margin-bottom: 6px;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .img-1 {
      background-image: url('@/assets/icon/t1.png');
    }

    .img-2 {
      background-image: url('@/assets/icon/t2.png');
    }

    .img-3 {
      background-image: url('@/assets/icon/t3.png');
    }

    .img-4 {
      background-image: url('@/assets/icon/t4.png');
    }

    .img-5 {
      background-image: url('@/assets/icon/t5.png');
    }

    .img-6 {
      background-image: url('@/assets/icon/t6.png');
    }

    .img-7 {
      background-image: url('@/assets/icon/t7.png');
    }

    .img-8 {
      background-image: url('@/assets/icon/t8.png');
    }

    .img-9 {
      background-image: url('@/assets/icon/t9.png');
    }

    .img-10 {
      background-image: url('@/assets/icon/t10.png');
    }

    .title {
      font-size: 28px;
      line-height: 40px;
      font-weight: 700;
      display: inline-block;
      background: linear-gradient(to right, #221A8A 0%, #FF000A 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .en {
      font-size: 16px;
      color: #b3b3b3;
      line-height: 24px;
    }

    .bot {
      font-size: 16px;
      line-height: 1.6;
      color: #444;
    }
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 852px;
    height: 246px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.project-item {
  padding-top: 50px;

  &:last-child {
    margin-bottom: 70px;
  }

  // &:nth-child(1),
  // &:nth-child(3),
  // &:nth-child(6),
  // &:nth-child(9) {
  //   .left {
  //     text-align: left;
  //   }
  // }
}
</style>